import cx from 'classnames';
import React from 'react';
import styles from './index.less';
const Star = ({ color = '#fff' }: { color?: string }) => {
  const width = 20;
  const half = 10; //width/2;
  const quat = 5; //width/4;
  return (
    <svg
      version="1.1"
      viewBox={'0 0 ' + width + ' ' + width + ''}
      height={width}
      width={width}
      style={{
        width: '100%',
        height: '100%',
      }}
    >
      <path
        d={
          'M 0 ' +
          half +
          ' c ' +
          quat +
          ' 0 ' +
          half +
          ' -' +
          quat +
          ' ' +
          half +
          ' -' +
          half +
          ' c 0 ' +
          quat +
          ' ' +
          quat +
          ' ' +
          half +
          ' ' +
          half +
          ' ' +
          half +
          ' c -' +
          quat +
          ' 0 -' +
          half +
          ' ' +
          quat +
          ' -' +
          half +
          ' ' +
          half +
          ' c 0 -' +
          quat +
          ' -' +
          quat +
          ' -' +
          half +
          ' -' +
          half +
          ' -' +
          half +
          ''
        }
        stroke={color}
        strokeWidth={1}
        fill={color}
      />
    </svg>
  );
};
const Mountain = ({
  type,
  color = '#fff',
}: {
  type: number;
  color?: string;
}) => {
  const width = 20;
  return (
    <svg
      version="1.1"
      viewBox={'0 0 500 240'}
      style={{
        width: '100%',
        height: '100%',
      }}
    >
      {type == 1 ? (
        <path
          d="M0,112.6c0,0,19.83-1.67,54.24-52.47l61.77,23.81l34.6-20.84c0,0,40.19,83.35,85.95,78.51  s82.98-81.49,82.98-81.49s44.37,18.98,72.84-22.05c0,0,20.45,47.64,99.8,51.87v150.66H0V112.6z"
          stroke={color}
          strokeWidth={1}
          fill={color}
        />
      ) : type == 2 ? (
        <path
          d="M0,136.88c0,0,24.01,21.77,55.83,20.09c31.81-1.67,37.67-4.09,51.07-10s23.44-18.23,54.42-25.88  c0,0,15.07,25.83,36.84,25.83s47.94-25.83,47.94-25.83s24.95,27.5,63.54,29.6c38.37,2.09,62.65-21.35,75.21-40.61  c0,0,92.45,106.33,107.34,120.56v9.98H0V136.88z"
          stroke={color}
          strokeWidth={1}
          fill={color}
        />
      ) : type == 3 ? (
        <path
          d="M492.19,95.86c0,0-15.07-6.7-40.19-6.7c0,0-59.62,74.89-108.18,75.73c-48.56,0.84-79.46-29.16-79.46-29.16  s-96.18,32.97-138.04,58.08v46.81l365.86-0.77V95.86z"
          stroke={color}
          strokeWidth={1}
          fill={color}
        />
      ) : type == 4 ? (
        <path
          d="M502.89,137.95c0,0-12.56-5.02-21.77-11.72s-19.16-18.88-34.33-18.42c-19.44,0.6-31.45,19.38-49.12,19.88  c-25.86,0.74-44.65-19.05-64-19.92c-16.38-0.74-21.02,12.04-42.42,13.34c-21.4,1.3-15.98-3.06-32.74-0.78  c-26.23,3.57-42.6,22.5-58.51,28.82c-14.39,5.72-33.4,5.79-45.67-9.8s-13.4-21.17-30.88-22.29c-17.49-1.12-11.53,11.91-42.79,10.79  c-31.26-1.12-28.73-15.26-54.7-15.26s-37.95,12.65-37.95,12.65v115.37h514.88V137.95z"
          stroke={color}
          strokeWidth={1}
          fill={color}
        />
      ) : (
        <path
          d="M494.44,159.45c8.19,2.23-23.44-13.4-36.47-12.65c-13.02,0.74-23.07,11.97-44.28,12.87s-37.53-26.02-89.3-26.26  c-38.71-0.19-42.42,16.37-70.33,15.63s-47.63-11.94-59.18-9.68s-17.49,10.08-34.6,10.08s-20.09-12.65-36.3-12.6  c-19.89,0.06-27.2,17.63-63.8,15.95C23.6,151.11,3.64,142-1.94,141.25v99.37h497.72L494.44,159.45z"
          stroke={color}
          strokeWidth={1}
          fill={color}
        />
      )}
    </svg>
  );
};
interface ViewProps extends React.HTMLAttributes<HTMLSpanElement> {
  active?: boolean;
}
export default class ButtonDayNight2 extends React.Component<ViewProps> {
  public render() {
    const { active, className, children, ...restProps } = this.props;
    return (
      <span
        className={cx(styles.button, { [styles.night]: active }, className)}
        {...restProps}
      >
        <span className={styles.btnInner}>
          <span className={styles.bg}></span>
          <span className={cx(styles.bg, styles.bg2)}></span>
          <span className={styles.sun}></span>
          <span className={styles.circle}>
            <span className={styles.circleNight}>
              <span className={styles.crater} />
              <span className={cx(styles.crater, styles.crater2)} />
              <span className={cx(styles.crater, styles.crater3)} />
            </span>
          </span>
          <span className={styles.stars}>
            {new Array(9).fill(1).map((e, ind) => (
              <span
                className={cx(styles.star, styles['star' + (ind + 1)])}
                key={ind + 'star'}
              >
                <Star />
              </span>
            ))}
          </span>
          <span className={styles.mountains}>
            <span className={cx(styles.mountain, styles.mountain1)}>
              <Mountain color="#fef495" type={1} />
            </span>
            <span className={cx(styles.mountain, styles.mountain2)}>
              <Mountain color="#f09d58" type={2} />
            </span>
            <span className={cx(styles.mountain, styles.mountain3)}>
              <Mountain color="#ec7d28" type={3} />
            </span>
            <span className={cx(styles.mountain, styles.mountain4)}>
              <Mountain color="#0D72E5" type={4} />
            </span>
            <span className={cx(styles.mountain, styles.mountain5)}>
              <Mountain color="#002674" type={5} />
            </span>
            <span className={cx(styles.mountain, styles.mountain6)}>
              <Mountain color="#043792" type={5} />
            </span>
          </span>
          <span className={styles.grounds}>
            <span className={cx(styles.ground, styles.ground1)}></span>
            <span className={cx(styles.ground, styles.ground2)}></span>
          </span>
          <span className={cx(styles.sun, styles.sun2)}></span>
        </span>
      </span>
    );
  }
}
